<template>
    <!-- Category-Navbar -->
    <div class="Cate-Nav">
        <van-nav-bar title="分类" />
    </div>
    <div class="menu">
        <!-- 一级循环渲染，树形 -->
        <div class="menuLeft">
            <ul>
                <!-- 添加点击事件 -->
                <li :class="index == active ? 'menu-item activeItem' : 'menu-item'" v-for="(menu, index) in menus"
                    :key="index" @click="clickList(index)">
                    <p class="text">{{ menu.name }}</p>
                </li>
            </ul>
        </div>
        <div class="menuRight" ref="rightList">
            <!-- 二级分类,for循环渲染 -->
            <ul>
                <li class="m-right" v-for="(menu, index1) in menus" :key="index1">
                    <h4 class="right-title">{{ menu.name }}</h4>
                    <ul class="right-item">
                        <li v-for="(item, index2) in menu.children" :key="index2">
                            <!-- 路由传参获取详情页 -->
                            <router-link class="right-item-link" :to="{ name: 'goodslist', params: { category_id: item.id } }">
                                <div class="right-item-img">
                                    <img :src="item.picture" alt="">
                                </div>
                                <span>{{ item.name }}</span>
                            </router-link>
                        </li>
                    </ul>
                </li>
                <!-- 底部吸顶 -->
                <li class="right-bottom"></li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick } from 'vue';
import { getCategoryList } from '../api';
import { RouterLink } from 'vue-router';
// 引入better-scoll插件
import BScroll from '@better-scroll/core'
const menus = ref([])
// 存储分类的头部位置
const rightTop = ref([])
const rightList = ref()
const active = ref(0)

// 左BS
let leftBscroll = null
// 右侧滑动y轴
const scrollY = ref(0)
// 右BS
let rightBscroll = null


//onMounted调用后端数据
onMounted(() => {
    loadCategoryList()
    // var arr = [0, 60, 140, 230, 540, 900];
    // var result = getMaxFirst(arr, 1000);
    // console.log(result, 'resut');

})

//监听右侧列表高度
watch(menus, () => {
    nextTick(() => {
        // 方法
        rollBScroll()
        RightHeight()
    })
})

//获取分类数据
const loadCategoryList = async () => {
    let data = await getCategoryList()
    //转换后的值赋值给menus
    var treeData = getTreeData(data);
    menus.value = treeData;
    console.log(treeData, '1111');
    // 树形结构
    console.log(data)
}

//树形方法
const getTreeData = (data) => {
    var parentEl = [];
    var childrenEl = [];
    //过滤父子，并给父加了一个children属性
    data.map(item => {
        if (item.pid == 0) {
            item.children = []
            parentEl.push(item)
        } else {
            childrenEl.push(item)
        }
    })
    //在子里去找到对应的父塞入children
    childrenEl.map(ite => {
        var findIndex = parentEl.findIndex(item => item.id === ite.pid);
        if (findIndex !== -1) {
            parentEl[findIndex].children.push(ite)
        }
    })
    return parentEl
}



const getMaxFirst = (arr, el) => {
    var findIndex = arr.findIndex(item => item > el);

    return findIndex === -1 ? arr.length - 1 : findIndex - 1;

}

// 获取当前点击的菜单项索引值
const clickList = index => {
    active.value = index
    // 滚动位置
    scrollY.value = rightTop.value[index]
    rightBscroll.scrollTo(0, -scrollY.value)

    console.log(rightTop.value[index])
}

// 初始化右侧菜单高度
const RightHeight = () => {
    const menuArray = []
    let top = 0
    menuArray.push(top)
    // getElements获取元素
    const allList = document.getElementsByClassName('m-right')
    console.log(allList)
    // foreach遍历返回数组中选定的元素
    Array.prototype.slice.call(allList).forEach(li => {
        // 返回的clientHeight高度推入top
        top += li.clientHeight
        menuArray.push(top)
    });
    // 赋值
    rightTop.value = menuArray
    console.log(rightTop.value)
}

// 初始化BScroll
const rollBScroll = () => {
    //基础初始化左侧
    leftBscroll = new BScroll('.menuLeft', {
        click: true,
        // 滚轮事件
        mouseWheel: true
    })
    // 基础初始化右侧
    rightBscroll = new BScroll('.menuRight', {
        click: true,
        mouseWheel: true,
        probeType: 3
    })
    // (事件绑定)获取pos的y，把值赋给s-Y
    rightBscroll.on('scrollEnd', pos => {
        scrollY.value = Math.abs(pos.y)
        console.log(scrollY.value)
    })
}

watch(scrollY, () => {
    var activeIndex = getMaxFirst(rightTop.value, scrollY.value);
    console.log(activeIndex, '1111');
    active.value = activeIndex



})

</script>

<style scoped>
.activeItem {
    background-color: #ff8001;
    color: #fff;
}

.Cate-Nav {
    --van-nav-bar-background: #ff8001;
    --van-nav-bar-title-text-color: #fff;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.menu {
    display: flex;
    position: absolute;
    text-align: center;
    top: 46px;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
}

/* 左侧样式 */
.menuLeft {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    line-height: 54px;
}

.menu-item {
    height: 54px;
    width: 100%;
    border-bottom: 1px solid #e1e1e1;
}

.text {
    width: 100%;
    margin: 0;
}

/* 右侧样式 */
.menuRight {
    flex: 1;
    background: #fff;
}

.m-right {
    height: 100%;
}

.right-title {
    margin: 0;
    text-align: left;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding: 10px;
}

.right-item {
    padding: 7px 10px 10px;
    display: flex;
    overflow: hidden;
    flex-flow: row wrap;

    li {
        width: 33.3%;

        .right-item-link {
            .right-item-img {
                width: 100%;

                img {
                    width: 70px;
                    height: 75px;
                }
            }

            span {
                display: inline-block;
                font-size: 14px;
                color: #333;
            }
        }
    }
}

.right-bottom {
    padding-bottom: 500px;
}
</style>